<template>
  <view class="">
    <no-data v-if="!groupList || groupList.legth <= 0" title="暂无套餐"></no-data>
    <view v-else class="group-item" elevation="12px" v-for="(item,index) in groupList" :key="item.groupId">
      <text class="title">{{item.title}}</text>
      <course-item v-for="(info,i) in item.list" :key="item.courseId" :item="info"></course-item>
      <view class="price-box space-between center">
        <view class="">
          <text class="group-price">￥{{item.groupPrice}}</text>
          <text class="total-price">￥{{item.totalPrice}}</text>
        </view>
        <text class="buy" @click="bugGroupHandler(item)">购买套餐</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import courseItem from '@/components/common/course-item.vue'
  import {
    ref,getCurrentInstance
  } from 'vue'
  const {proxy} = getCurrentInstance()
  const props = defineProps({
    courseId:Number,
    groupList: {
      type: Array,
      default: () => []
    }
  })

  const bugGroupHandler = (item) => {
    // /pages/order/confirm-buy?
    // #ifdef APP-PLUS
    proxy.navTo(`/pages/order/confirm-buy?courseGroupId=${item.groupId}`)
    // #endif
    
    // #ifndef APP-PLUS
    proxy.navTo(`/pages/order/confirm-buy?courseGroup=` + encodeURIComponent(JSON.stringify(item)))
    // #endif
  }
</script>

<style scoped lang="scss">
  .group-item {
    margin: 36rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 2px 0 10px 0 rgba(0, 0, 0, .3);
    padding: 0 20rpx;

    .title {
      font-size: 35rpx;
      font-weight: bold;
      line-height: 70rpx;
    }

    .price-box {
      color: $mxg-text-color-red;
      font-size: 30rpx;
      line-height: 80rpx;
      font-weight: bold;

      .group-price {
        font-size: 37rpx;
        margin-right: 10rpx;
      }

      .total-price {
        color: #999;
        font-weight: normal;
        text-decoration: line-through;
      }
    }
  }
</style>
